<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>班级网站 - 主页</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
    <h1>国贸联联看</h1>
    <nav>
        <ul>
            <li><a href="index.html">主页</a></li>
            <li><a href="class-intro.html">班级介绍</a></li>
            <li><a href="learning-garden.html">学习园地</a></li>
            <li><a href="class-news.html">班级新闻</a></li>
            <li><a href="class-album.html">班级相册</a></li>
            <li><a href="music-appreciation.html">音乐欣赏</a></li>
        </ul>
    </nav>
</header>
<main>
    <section id="welcome">
        <h2>欢迎来到我们的班级网站</h2>
        <p>这里是<b>XX班</b>的专属空间，我们将在这里分享学习生活中的点滴，记录成长的足迹。</p>
        <p>无论您是学生、家长还是老师，都欢迎您浏览并参与我们的互动。</p>
    </section>

    <!-- 班级亮点 -->
    <section id="highlights">
        <h2>班级亮点</h2>
        <div class="highlight-item">
            <img src="images/highlight1.jpg" alt="班级活动一" class="highlight-image">
            <h3>丰富多彩的课外活动</h3>
            <p>我们积极参与各种校内外活动，如运动会、科技节、志愿者服务等。</p>
        </div>
        <div class="highlight-item">
            <img src="images/highlight2.jpg" alt="班级活动二" class="highlight-image">
            <h3>优秀的学习成绩</h3>
            <p>在学术上，我们不断追求卓越，多次获得学校表彰。</p>
        </div>
        <div class="highlight-item">
            <img src="images/highlight3.jpg" alt="班级活动三" class="highlight-image">
            <h3>团结友爱的班级氛围</h3>
            <p>同学们互帮互助，共同进步，形成了积极向上的班级文化。</p>
        </div>
    </section>

    <!-- 最新新闻 -->
    <section id="latest-news">
        <h2>最新新闻</h2>
        <article>
            <h3>本周五举办“科技与未来”班会</h3>
            <p><strong>发布日期：2024年12月28日</strong></p>
            <p>本周五（12月29日），我们将举办一场主题为“科技与未来”的班会，请所有同学准时参加。班会结束后，我们还将进行小组讨论和互动游戏。</p>
        </article>
        <article>
            <h3>元旦晚会即将举行</h3>
            <p><strong>发布日期：2024年12月25日</strong></p>
            <p>元旦晚会将于2024年1月1日晚7点在多功能厅举行。请有才艺展示的同学提前报名，并准备好表演节目。</p>
        </article>
    </section>

    <!-- 活动预告 -->
    <section id="upcoming-events">
        <h2>活动预告</h2>
        <ul>
            <li><strong>1月1日：</strong>元旦晚会</li>
            <li><strong>1月5日：</strong>期末考试复习指导讲座</li>
            <li><strong>1月10日：</strong>春节联欢会</li>
        </ul>
    </section>

    <!-- 音乐欣赏推荐 -->
    <section id="music-recommendation">
        <h2>音乐欣赏推荐</h2>
        <p>本周推荐：<strong>海阔天空</strong> - Beyond乐队</p>
        <audio controls>
            <source src="audios/sea_sky.mp3" type="audio/mpeg">
            您的浏览器不支持 audio 元素。
        </audio>
        <p>了解更多：<a href="music-appreciation.html">进入音乐欣赏页面</a></p>
    </section>

    <!-- 快捷链接 -->
    <section id="quick-links">
        <h2>快捷链接</h2>
        <ul>
            <li><a href="class-intro.html">班级介绍</a></li>
            <li><a href="learning-garden.html">学习园地</a></li>
            <li><a href="class-news.html">班级新闻</a></li>
            <li><a href="class-album.html">班级相册</a></li>
            <li><a href="music-appreciation.html">音乐欣赏</a></li>
        </ul>
    </section>
</main>
<footer>
    <p>&copy; 2024 班级网站. All rights reserved.</p>
</footer>
</body>
</html>